<template>
    <!-- PCdandan 开奖记录 -->
    <!-- 外包裹盒子 -->
    <div id="wrap">
        <!-- 开奖视频 -->
        <!-- 开奖记录 -->
        <div class="record">
            <!-- 开奖记录头部 -->
            <div class="recordHead">
                <span class="qNumber">期号</span>
                <span class="kNumber">开奖号</span>
            </div>
            <!-- 开奖记录列表 -->
            <ul class="recordList">
                <li :class="topOrBottom(index)" v-for="(item,index) in winningInfo" :key="index">
                    <span class="qNumber">{{ item.series }}</span>
                    <span class="kNumber">
                        <span v-for="(number,indexs) in item.numbers.split(',')" :key="indexs">{{ number }}</span>
                        <span>=</span>
                        <span>{{sum(item.numbers.split(','))}}</span>
                    </span>
                    <div class="clearfix"></div>
                </li>
            </ul>
            <!-- 查看完整走势 -->
            <div class="trend hover-style">
                <p>查看完整走势>></p>
            </div>
        </div>

    </div>
    
</template>

<script>
export default {
    name: 'lotteryRecord',
    props: {
      winningInfo: {
        type: Array,
        default: []
      }
    },
    data(){
        return{
            recordList:[
                {
                   qNumber: '819049',
                   kNumber: [2,9,6]
                },
                {
                   qNumber: '819049',
                   kNumber: [2,9,6]
                },
                {
                   qNumber: '819049',
                   kNumber: [2,9,6]
                },
                {
                   qNumber: '819049',
                   kNumber: [2,9,6]
                },
                {
                   qNumber: '819049',
                   kNumber: [2,9,6]
                },
                {
                   qNumber: '819049',
                   kNumber: [2,9,6]
                },
                {
                   qNumber: '819049',
                   kNumber: [2,9,6]
                },
                {
                   qNumber: '819049',
                   kNumber: [2,9,6]
                },
                {
                   qNumber: '819049',
                   kNumber: [2,9,6]
                },
                {
                   qNumber: '819049',
                   kNumber: [2,9,6]
                },
                
            ]
        }
    },
    methods:{
        topOrBottom(index){
            if( index === 0 ){
                return 'top';
            }else if( index === this.recordList.length-1 ){
                return 'bottom';
            }
        },
        sum(item){
            var a = 0;
            for( var i = 0; i <= item.length-1; i++ ){
                a += parseInt(item[i])
            }
            return a;
        }
    }
}
</script>

<style lang="stylus" scoped>
    // 外包裹盒子
    #wrap
        width 200px;
        float left
        margin-top 1px 
        //开奖记录
        .record
            width 198px;
            // height 382px;
            // border 1px solid red;
            border-radius 3px;
            overflow hidden
            //开奖记录头部head
            .recordHead
                width 198px;
                height 36px;
                background-color #222836;
                .qNumber
                    float left;
                    width 90px;
                    height 36px;
                    line-height 36px;
                    color #fff;
                    font-size 14px;
                    font-weight bold;
                    text-indent 21px;
                .kNumber
                    float left;
                    width 108px;
                    height 36px;
                    line-height 36px;
                    font-size 14px;
                    color #fff;
                    font-weight bold;
                    text-indent 24px;
            // 开奖记录列表
            .recordList
                width 196px;
                // height 310px;
                border 1px solid #dbd3d3;
                border-top 1px solid transparent;
                list-style none;
                font-size 0;
                background #f8f5f5 
                li
                    // height 10px;
                    // line-height 10px;
                    margin-bottom 21px;
                    .qNumber
                        float left;
                        width 89px;
                        height 10px;
                        line-height 10px;
                        color #2b3042;
                        font-size 10px;
                        text-indent 21px;
                        border-right 1px solid #dbd3d3;       
                    .kNumber
                        float left;
                        width 106px;
                        height 10px;
                        line-height 10px;
                        color #2b3042;
                        text-indent 24px;
                        font-size 10px;
                        span 
                            text-indent 0;
                            text-align center;
                            font-size 10px;
                            float left;
                            width 17px;
                            height 10px;
                            line-height 10px;
                            border-right 1px solid #dbd3d3;
                            color red;
                    //清除浮动
                    .clearfix
                        clear both;
                .top 
                    margin-top 10px;
                .bottom
                    margin-bottom 10px;
            .trend
                width 196px;
                height 34px;
                border 1px solid #dbd3d3;
                border-top none;
                border-bottom-left-radius 3px;
                border-bottom-right-radius 3px;
                background #f8f4f3 
                p
                    width 196px;
                    text-align center;
                    height 34px;
                    line-height 34px;
                    font-size 14px;
                    color #8c8f98;
                    cursor pointer;
</style>